<template>
	<div class="headBox">
		<div class="headCont">
			<img src="@/images/logo.png" class="headLogo" @click="toName('index')" />
			<div class="headMenu">
				<div class="headMenuItem" :class="{'active':tabindex==1}" @click.stop="toName('index')">
					<img src="@/images/head_menu1.png" class="normal"/>
					<img src="@/images/head_menu1ac.png" class="active"/>
					<span>影像数据库</span>
				</div>
				<div class="headMenuItem" :class="{'active':tabindex==2}" @click.stop="toName('case')">
					<img src="@/images/head_menu2.png" class="normal"/>
					<img src="@/images/head_menu2ac.png" class="active"/>
					<span>诊断思维练习</span>
				</div>
				<div class="headMenuItem" :class="{'active':tabindex==3}" @click.stop="openList(2)">
					<img src="@/images/head_menu3.png" class="normal"/>
					<img src="@/images/head_menu3ac.png" class="active"/>
					<span>考试中心 <i class="el-icon-arrow-down"></i></span>
					<el-collapse-transition>
						<div class="headUserMore shadow" @click.stop v-show="shownav">
							<div class="headUserMoreItem" @click="toNameExams('SIMULATE')">模拟考试</div>
							<div class="headUserMoreItem" @click="toNameExams('EXAM')">正式考试</div>
						</div>
					</el-collapse-transition>
				</div>
			</div>
			<div class="headUser">
				<div class="headUser_com">
					<img src="@/images/login_bottom.png" />山东中飞科技有限公司 | 研发
				</div>
				<div class="headUserLogin">
					<div class="headUserIcon" @click.stop='openList(1)'>
						<img :src="baseurl + userinfo.headPortraitUrl" v-if="userinfo.headPortraitUrl" />
						<img src="@/images/1.png" v-else/>
					</div>
					<div class="headUserInfo text-ellipsis" @click.stop='openList(1)'>
						{{userinfo.studentName}} <i class="el-icon-arrow-down"></i>
					</div>
					<el-collapse-transition>
						<div class="headUserMore userinfo shadow" @click.stop='showmenu = false' v-show="showmenu">
							<div class="headUserMoreItem" @click="toUser">个人中心</div>
							<div class="headUserMoreItem" @click="tologout()">退出登录</div>
						</div>
					</el-collapse-transition>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import { getStorageToken, setStorageToken, removeStorageToken } from '@/utils/auth'
	import { selectStudentDetail, studentUpdatePwd } from "@/api/center.js"
	import { mapGetters } from "vuex"
	export default {
		name: 'headmain',
		data() {
			return {
				userinfo: {
					name: ''
				},
				shownav: false,
				showmenu: false,
				tabindex: 0,
			}
		},
		computed: {
			...mapGetters([
				"newmessage"
			])
		},
		created() {
			this.tabindex = this.$route.meta.tabindex || 0;
		},
		watch: {
			$route(val) {
				this.shownav = false;
				this.showmenu = false;
				if(val) {
					this.tabindex = this.$route.meta.tabindex || 0;
				}
				if(getStorageToken()) {
					this.getinfo();
				}
			},
			newmessage(val) {
				this.getinfo()
			},
		},
		mounted() {
			if(getStorageToken()) {
				this.getinfo();
			}
			this.tiggermenu();
		},
		methods: {
			openList(type) {
				if(type == '1') {
					this.showmenu = !this.showmenu;
					this.shownav = false;
				}
				if(type == '2') {
					this.showmenu = false;
					this.shownav = !this.shownav;
				}
			},
			toMessage() {
				this.$router.push({
					name: 'center',
					query: {
						activeTab: 'message'
					}
				})
			},
			toUser() {
				this.$router.push({
					name: 'center',
					query: {
						activeTab: 'user'
					}
				})
			},
			tiggermenu() {
				var that = this;
				this.$nextTick(() => {
					$('#app').on('click', function() {
						that.showmenu = false;
						that.shownav = false;
					})
				})
			},
			toName(name) {
				if(this.$route.name != name) {
					this.$router.push({
						name: name
					})
				}
			},
			toNameExams(paperType) {
				this.$router.replace({
					name: 'redirect',
					query: {
						name: 'exams',
						query: JSON.stringify({
							paperType
						})
					}
				})
			},
			tologout() {
				this.$confirm('确定退出系统？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
					this.hiddenThem()
					removeStorageToken();
					location.reload()
				}).catch(() => {})
			},
			hiddenThem() {
				this.showmenu = false;
				this.shownav = false;
			},

			getinfo() {
				selectStudentDetail().then(res => {
					if(res.code == '200') {
						this.userinfo = res.data;
					}
				})
			},
		},
	}
</script>